.xdh-validate--top {
  position: relative;
  .el-form-item__error {
    position: absolute;
    left: 0%;
    top: -110%;
    padding: 1rem;
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.7);
    color: #FFFFFF;
    display: block;
    word-break: keep-all;
    white-space: nowrap;
    z-index: 100;
    &::after {
      content: '';
      position: absolute;
      bottom: -1rem;
      left: 3rem;
      transform: translateX(-50%);
      border-style: solid dashed dashed dashed;
      border-width: 0.5rem;
      border-color: rgba(0, 0, 0, 0.7) transparent transparent transparent;
      width: 0;
      height: 0;
    }
  }
}

.xdh-validate--right {
  position: relative;
  .el-form-item__error {
    position: absolute;
    left: 104%;
    top: 0%;
    padding: 1rem;
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.7);
    color: #FFFFFF;
    display: block;
    word-break: keep-all;
    white-space: nowrap;
    z-index: 100;
    &::after {
      content: '';
      position: absolute;
      bottom: .5rem;
      left: -1rem;
      transform: translateY(-50%);
      border-style: dashed solid dashed dashed;
      border-color: transparent rgba(0, 0, 0, 0.7) transparent transparent;
      border-width: .5rem;
      width: 0;
      height: 0;
    }
  }
}
